<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Main</title>
    <link rel="stylesheet" type="text/css" th:href="@{../css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" th:href="@{../../css/admin.css}" media="all">
    <script type="text/javascript" th:src="@{../layui.all.js}"></script>
    <script type="text/javascript" th:src="@{../js/jquery-3.4.1.js}"></script>
</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black" id="LAY-left-menu">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree layui-inline"   lay-shrink="all" lay-filter="left-nav" style="margin-right: 10px;">
                <!--<li class="layui-nav-item">
                    <a class="" href="javascript:;">财务管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#" data-src="/home/acc-manage.html">会计题管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">鉴权管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="#" data-src="/home/auth-manage/account-list.html">账户管理</a></dd>
                        <dd><a href="#" data-src="/home/auth-manage/user-manage.html">用户管理</a></dd>
                        <dd><a href="#" data-src="/home/auth-manage/menu-list.html">菜单管理</a></dd>
                        <dd><a href="#" data-src="/home/auth-manage/role-list.html">角色管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">食谱</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">菜单（中式）</a></dd>
                        <dd><a href="javascript:;">菜单（西式）</a></dd>
                        <dd><a href="javascript:;">菜谱（中式）</a></dd>
                        <dd><a href="javascript:;">菜谱（西式）</a></dd>
                        <dd><a href="javascript:;" data-src="/home/test">超练级</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="">云市场</a></li>
                <li class="layui-nav-item"><a href="">发布商品</a></li>-->
            </ul>
        </div>
    </div>

    <div class="layadmin-pagetabs" id="LAY_app_tabs">
        <div class="layui-icon layadmin-tabs-control layui-icon-prev" layadmin-event="leftPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-next" layadmin-event="rightPage"></div>
        <div class="layui-icon layadmin-tabs-control layui-icon-down">
            <ul class="layui-nav layadmin-tabs-select" lay-filter="layadmin-pagetabs-nav">
                <li class="layui-nav-item" lay-unselect="">
                    <a href="javascript:;"><span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child layui-anim-fadein layui-anim layui-anim-upbit">
                        <dd layadmin-event="closeThisTabs"><a href="javascript:;">关闭当前标签页</a></dd>
                        <dd layadmin-event="closeOtherTabs"><a href="javascript:;">关闭其它标签页</a></dd>
                        <dd layadmin-event="closeAllTabs"><a href="javascript:;">关闭全部标签页</a></dd>
                    </dl>
                </li>
                <span class="layui-nav-bar" style="left: 0px; top: 35px; width: 0px; opacity: 0;"></span></ul>
        </div>
        <div class="layui-tab" lay-unauto="" lay-allowclose="true" lay-filter="layadmin-layout-tabs">
            <ul class="layui-tab-title" id="LAY_app_tabsheader">
                <li lay-id="home/console.html" lay-attr="home/console.html" class=""><i class="layui-icon layui-icon-home"></i><i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li>
        </div>
    </div>

    <div class="layui-body" style="padding: 15px">
        <iframe frameborder="0" scrolling="yes" style="width: 100%" src="" id="aa" class="layadmin-iframe"></iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
</body>

<script type="text/javascript" th:src="@{../../layui.all.js}"></script>
<script type="text/javascript" th:src="@{../../js/layinit.js}"></script>

<script>
    layui.config({
        base: '../../js/ext/' // 设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
    }).use(['element', 'serverurl'], function () {
        let element = layui.element,
            auth = layui.auth;


        /*动态读取菜单*/
        $.get(auth.menu.listAll, function (res) {
            let data = res.data;

            let leftUl = $('[lay-filter="left-nav"]');
            leftUl.empty();

            layui.each(data, function (index, item) {
                let content = '';
                if(index == 0){
                    content += '<li class="layui-nav-item layui-nav-itemed">';
                }else{
                    content += '<li class="layui-nav-item">';
                }
                content += '<a href="javascript:;">'+ item.name  +'</a>';

                // 拼接二级菜单
                content += loadChild(item.child);

                content += '</li>';

                // 添加菜单
                leftUl.append(content);

                element.render('nav');
            });
        });


        // 二级菜单
        function loadChild(child){
            if(child == null) return;

            let content = '';

            if(child != null && child.length > 0){
                content += '<dl class="layui-nav-child">';
            }else{
                content += '<dl>';
            }

            layui.each(child, function (index, item) {
                content += '<dd>';
                content += '<a href="#" data-src="'+item.url+'">'+ item.name  +'</a>';
                content += '</dd>';
            });

            content += '</dl>';
            return content;
        }

        element.on('nav(left-nav)', function(elem){
            $("iframe").attr("src", elem.attr('data-src'));
            //一下代码是根据窗口高度在设置iframe的高度
            var frame = $("#aa");

            var frameheight = $(window).height();
            frame.css("height",frameheight);

        })
    });


    //JavaScript代码区域
    /*layui.use('element', function(){
        var element = layui.element;
        element.render('nav');
        element.on('nav(left-nav)', function(elem){
            $("iframe").attr("src", elem.attr('data-src'));
            //一下代码是根据窗口高度在设置iframe的高度
            var frame = $("#aa");

            var frameheight = $(window).height();
            console.log(frameheight);
            frame.css("height",frameheight);

        })
    });*/
</script>

</html>